<template>
  <div class="www">
    <div class="wechat-share" @click="changeActive" ref="oWechatShare">
      <div :class="['iconfont icon-fenxiang', active ? 'active' : '']"></div>
      <div class="text">{{ videoData.shareCount }}</div>
    </div>
    <ShareCover :show="isShowCover" @close="handleCloseCover"></ShareCover>
  </div>
</template>

<script setup>
import { getImageStream } from '@/api/index.js';
import ShareCover from './components/ShareCover/index.vue'
import { wxEmpower, getTicket } from '@/api/login.js';
import { getVideoMessage, addShareLog } from '@/api/videoPlay.js';
import { wxShare } from '@/utils/tools.js';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import logo from '@/assets/images/logo1.png';

const props = defineProps({
  message: { type: Object, default: () => ({}) },
  active: { type: Boolean, default: false },
  baseUrl: { type: String, default: '' },  // 保证分享完成之后再跳转回当前页面
})


const route = useRoute();
const router = useRouter();

onMounted(() => {  // 重新加载 会触发该方法
  // optionShare();
  setVideoData();
})

//  是否展示遮罩层
const isShowCover = ref(false);

const handleCloseCover = () => {
  isShowCover.value = false;
}

const emit = defineEmits(['change-active']);

const oWechatShare = ref(null);

const videoData = ref({});
async function setVideoData() {
  const id = route.params.videoId || '';
  const { code, data } = await getVideoMessage(id);
  if(code === 200) {
    try {
      data.videoFile = JSON.parse(data.videoFile);
      data.fileId = data.videoFile[0].fileId;
      data.videoSource = process.env.VUE_APP_API_BASE_URL + '/spgl/SpdbVideo/getVideo?fileId=' + (data.fileId || '');
      // data.videoSource = 'api/spgl/SpdbVideo/getVideo?fileId=20240425_553135991724974021.mp4'
    } catch(ev) {
      data.videoSource = '';
    }

    //  处理图片
    try {
      data.videoPic = JSON.parse(data.videoPic);
      data.image = data.videoPic[0].url ? process.env.VITE_API_API_IMAGE_URL + data.videoPic[0].url : '';
    } catch(ev) {
      data.image = '';
    }

    try { data.videoLabelList = JSON.parse(data.videoLabelList) } catch(ev) { data.videoLabelList = [] }

    videoData.value = data;
  }
}

//  发送时间 在外边进行修改, 如果分享成功会记录下来, 改变分享的颜色
const changeActive = async () => {
  isShowCover.value = true;
  //  配置微信分享
  optionShare();
}

// 二进制流转换为base64 格式。
const getBase64 = (data) => {
  return new Promise((resolve, reject) => {
    const blob = new Blob([data], { type: "image/jpeg" }); //类型一定要写！！！
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

//  通过 code 配置微信分享
const optionShare = async () => {
  const { code, data } = await getTicket();
  const { title, intro, image } = props.message;
  console.log(data.ticket)
  //  process.env.VITE_API_API_IMAGE_URL
  if (code === 200) {
    // const stream = await getImageStream(location.origin + process.env.VITE_API_API_IMAGE_URL + image);

    wxShare(data.ticket, {
      title,
      desc: intro,
      link: location.href,
      imgUrl: logo,
      success: async () => {
        await addShareLog({
          parentId: localStorage.getItem('parentId'),
          shareType: '01',
          shareContentId: route.params.videoId
        }).then(
            setVideoData()
        );
      }

    });
  }
}

</script>

<style lang="scss" scoped>
.iconfont {
  font-size: 1.6rem;
}

.active {
  color: red;
}
</style>
